<template>
  <div class="image-wrapper">
    <div class="image-cover" v-if="isCoverShow" v-on:click="clickHandler">
      <div class="image-cover-wrapper">
        <div class="image-cover-setting" v-if="onSelect" v-on:click="onSelect(src)"><Icon v-bind:size="iconSize" type="ios-checkmark" /></div>
        <div class="image-cover-setting" v-if="onDelete" v-on:click="onDelete(src)"><Icon v-bind:size="iconSize" type="ios-trash" /></div>
        <div class="image-cover-setting" v-if="onExchange" v-on:click="onExchange(src)"><Icon v-bind:size="iconSize" type="md-swap" /></div>
        <Tooltip v-if="seeEnabled" max-width="1000" class="image-cover-setting" placement="bottom-start">
          <Icon v-bind:size="iconSize" type="ios-eye" />
          <div slot="content">
            <div style="text-align: center;">{{ src }}</div>
          </div>
        </Tooltip>
      </div>
    </div>
    <div class="image-slot">
      <slot></slot>
    </div>
    <div class="image-selected" v-if="isSelected"></div>
    <img v-bind:src="imgSrc" />
  </div>
</template>

<script src="./imageShow.js"></script>

<style lang="stylus">
@import './imageShow.styl'
</style>
